 <!-- 报告主内容区域 -->
<template>
  <div id="inspectionReport">
    <div v-if="time.length">
      <search class="search" :placeholder="'请输入报告项'" :itemlist="searchList"></search>
      <ul class="cbp_tmtimeline" v-show="isTimeAxis">
        <li v-for="item1 in time">
          <div class="circle"></div>
          <span class="time">{{item1|filterDateAxis}}</span>
          <div class="cbp_tmlabel">
            <ul class="list-record clearfix">
              <li
                class="pull-left"
                v-for="list in listData[item1]"
                :data-id="list.ID_Report"
                :data-name="list.Name"
                :data-time="list.Time_Check"
                @click="routeLink($event)"
              >
                <p>{{list.Time_Check|filterTimes}}</p>
                <p>{{list.Name}}</p>
              </li>
            </ul>
          </div>
          <div class="circle-bottom"></div>
        </li>
      </ul>
      <ul class="list-record clearfix" v-for="item1 in time" v-show="!isTimeAxis">
        <li
          class="pull-left"
          v-for="list in listData[item1]"
          :data-id="list.ID_Report"
          :data-name="list.Name"
          :data-time="list.Time_Check"
          @click="routeLink($event)"
        >
          <p>{{list.Time_Check|filterTimes}}</p>
          <p>{{list.Name}}</p>
        </li>
      </ul>
    </div>
    <loading v-if="isShow && time.length== 0"></loading>
    <noSearch v-if="!isShow && time.length == 0"></noSearch>
  </div>
</template>
<script>
import { apiInspectionList, apiInspectionNames } from "@/api/api";
import loading from "@/components/loading/loading";
import Bus from "@/components/common/bus"; //引入公共媒介JS BUS
import noSearch from "@/components/search/noSearch"; //导入没有搜索结果组件
import search from "@/components/search/search";
export default {
  data() {
    return {
      isActive: true,
      active: false,
      ReportPage: "检验",
      patientID: this.$store.getters.ID,
      dataTime: "0000-00-00",
      listData: [],
      time: [],
      isShow: true,
      isTimeAxis: true,
      idReport: "",
      reportName: "",
      searchList: [],
      searchKeywords: "",
      searchVal: "",
      Time_Check: ""
    };
  },
  watch: {
    dataTime: {
      handler(curVal, oldVal) {
        if (this.dataTime == "") {
          this.time = [];
          this.dataTime = "0000-00-00";
          this.isTimeAxis = true;
          this.isShow = true;
          this.getInspectionList();
        } else if (this.dataTime == "0000-00-00") {
          this.isTimeAxis = true;
          this.isShow = true;
          this.getInspectionList();
        } else {
          this.isShow = false;
          this.isTimeAxis = false;
          this.getInspectionList();
        }
      }
    },
    searchKeywords: {
      handler(curVal, oldVal) {
        this.getInspectionNames();
      }
    },
    searchVal: {
      handler(curVal, oldVal) {
        if (this.searchList.length === 0) {
          this.$toast.center("当前患者没有该指标项");
        } else {
          this.$router.push({
            path: "/reportpage/reportIndexItem",
            query: { item: 4, itemID: this.searchVal }
          });
        }
      }
    }
  },
  created() {
    sessionStorage.removeItem("scrollTop");
  },

  mounted() {
    Bus.$on("timePicker", e => {
      this.dataTime = e.trim();
    });
    Bus.$on("searchKeywords", e => {
      this.searchKeywords = e.trim();
    });
    Bus.$on("searchVal", e => {
      this.searchVal = e.trim();
    });
  },
  activated() {
    this.getInspectionList();
    this.searchList = [];
    // 返回同一个位置
    var scrollTop = sessionStorage.getItem("scrollTop");
    //console.log(scrollTop)
    if (scrollTop) {
      this.$nextTick(function() {
        $("#inspectionReport").scrollTop(scrollTop);
      });
    }
  },
  methods: {
    getInspectionList() {
      apiInspectionList({
        patientID: this.patientID,
        dateTime: this.dataTime,
        type: this.ReportPage
      })
        .then(res => {
          this.time = [];
          if (JSON.parse(res).Status == -1) {
            this.isShow = false;
          }
          if (JSON.parse(res).Status == 1) {
            this.listData = JSON.parse(res).Data;
            //console.log(this.listData)
            for (var item in JSON.parse(res).Data) {
              this.time.push(item);
            }
            this.isShow = true;
          }
        })
        .catch(err => {
          this.$toast.center("当前请求接口有问题，请联系管理员！！");
        });
    },
    getInspectionNames() {
      apiInspectionNames({
        patientID: this.$store.getters.ID,
        itemName: this.searchKeywords
      }).then(res => {
        if (JSON.parse(res).Status == 1) {
          this.searchList = JSON.parse(res).Data;
        } else {
          this.searchList = [];
        }
      });
    },
    routeLink(e) {
      this.idReport = e.currentTarget.getAttribute("data-id");
      this.reportName = e.currentTarget.getAttribute("data-name");
      this.Time_Check = e.currentTarget.getAttribute("data-time");
      sessionStorage.setItem("scrollTop", $("#inspectionReport").scrollTop());
      this.$router.push({
        path: "/reportpage/reportTestresult",
        query: {
          idReport: this.idReport,
          ReportPage: this.ReportPage,
          reportName: this.reportName,
          Time_Check: this.Time_Check,
          item: 4
        }
      });
    }
  },
  filters: {
    filterTimes(time) {
      if (!time) {
        return "";
      } else {
        return time.substring(11, 19);
      }
    }
  },
  components: {
    loading,
    noSearch,
    search
  }
};
</script>
<style scoped>
#inspectionReport {
  padding-left: 50px;
  margin-top: 10px;
  height: calc(100vh - 190px);
  overflow-y: auto;
  padding-bottom: 20px;
}
.cbp_tmtimeline {
  margin: 15px 0 0 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.cbp_tmtimeline:before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 0;
  width: 1px;
  background: #ccc;
}
.search {
  position: absolute;
  top: 20px;
  left: 460px;
}
.cbp_tmtimeline > li {
  position: relative;
  padding-left: 20px;
}

.cbp_tmtimeline .circle {
  width: 8px;
  height: 8px;
  line-height: 8px;
  position: absolute;
  color: #fff;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #84c3e3;
  text-align: center;
  left: -3px;
  top: 6px;
}

.cbp_tmtimeline .circle-bottom {
  width: 8px;
  height: 8px;
  line-height: 8px;
  position: absolute;
  color: #fff;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #84c3e3;
  text-align: center;
  left: -3px;
  bottom: -14px;
}

.list-record {
  display: flex;
  flex-wrap: wrap;
}

.cbp_tmlabel {
  padding-bottom: 25px;
}

.list-record li {
  width: 210px;
  padding: 15px 0;
  box-shadow: 0 0 10px #ccc;
  text-align: center;
  border-radius: 8px;
  margin-top: 25px;
  margin-left: 15px;
}

.list-record li p {
  padding: 0 12px;
  line-height: 25px;
  margin-top: 10px;
}

.list-record li p:first-child {
  margin-top: 0;
}
@media screen and (max-width: 768px) {
  .search{
    position: initial;
    top: 0;
    left: 0;
  }
  #inspectionReport{
    padding-left: 15px;
    padding-top: 15px;
    border-top: 1px solid #ccc;
  }
}
@media screen and (max-width: 425px) {
  .list-record li {
    margin-left: 0;
    margin-top: 10px;
  }
}
</style>
